<template>
  <div>
    <ul class="list">
      <li class="item" v-for="(v,i) in nav_list" :key="i" @click="changeRouter(v)">
        <div class="img">
          <img :src="v.imgUrl" alt="">
        </div>
        {{v.name}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
      return{
        nav_list:[
          {id:1,name:'航班',path:'/redar',value:'index',imgUrl:require('@/assets/images/nav/nav1.jpg')},
          {id:2,name:'专车',path:null,value:'index',imgUrl:require('@/assets/images/nav/nav2.jpg')},
          {id:3,name:'酒店',path:null,value:'index',imgUrl:require('@/assets/images/nav/nav3.jpg')},
          {id:4,name:'保险',path:null,value:'index',imgUrl:require('@/assets/images/nav/nav4.jpg')},
          {id:5,name:'值机',path:'/jizhi',value:'index',imgUrl:require('@/assets/images/nav/nav5.jpg')},
          {id:6,name:'出行问问',path:'/question',value:'index',imgUrl:require('@/assets/images/nav/nav6.jpg')},
          {id:7,name:'贵宾厅',path:null,value:'index',imgUrl:require('@/assets/images/nav/nav7.jpg')},
          {id:8,name:'畅行卡',path:null,value:'index',imgUrl:require('@/assets/images/nav/nav8.jpg')},
          {id:9,name:'消费者评价',path:'/survey',value:'index',imgUrl:require('@/assets/images/nav/nav9.jpg')},
          {id:10,name:'更多',path:'/moreService',value:'index',imgUrl:require('@/assets/images/nav/nav10.jpg')},
      ],
      }
    },
    created(){

    },
    methods:{
      changeRouter(e){
        if(e.path === null){
          this.$message({
            message: '页面还在努力开发中...',
            type: 'warning'
          });
          return false
        }
        this.$router.push({path:e.path})
      }
    }

}
</script>

<style>
.list{
  width:100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-content: center;
  
  flex-wrap: wrap;
  background-color: #f5f6f8;
}
img{
  width:0.4rem;
  height: 0.4rem;
  border-radius: 5px;
}
.item{
  width: 0.7rem;
  height: 0.7rem;
  text-align: center;
  font-size: 0.12rem;

}
.miss{
  width: 3.8rem;
  height: 1rem;
  line-height: 1rem;
  background-color: white;
 
}


</style>